import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import { wsService } from '@/utils/websocket';
import { useUserStore } from '@/stores/user'; // 用户状态（获取token）
import type { WsMessage } from '@/utils/websocket/type.ts';
import { getToken } from "@/utils/token";
// 引入Element Plus的Notification组件
import { ElNotification } from 'element-plus';

export function useWebSocket() {
    const status = ref('disconnected'); // 连接状态：disconnected/connected/reconnecting
    const error = ref<Error | null>(null); // 错误信息
    const messages = ref<WsMessage[]>([]); // 接收的消息列表（组件局部消息）
    const token = getToken()
    // 初始化连接
    const init = () => {
        if (!token) {
            error.value = new Error('未获取到token，请先登录');
            return;
        }
        status.value = 'connecting';
        wsService.init({
            url: import.meta.env.VITE_WS_URL || 'ws://localhost:8080/ws', // 从环境变量获取URL
            token: token,
        });
    };

    // 发送消息
    const sendMessage = (data: Partial<WsMessage>) => {
        return wsService.sendMessage(data);
    };

    // 显示通知
    const showNotification = (message: WsMessage) => {
        // 根据消息内容自定义通知
        ElNotification({
            title: message.title || '新消息通知',
            message: message.content || '收到一条新消息',
            type: message.type || 'info', // 可以根据消息类型显示不同样式
            duration: 5000, // 5秒后自动关闭
            position: 'top-right', // 通知位置
        });
    };

    // 监听WebSocket事件（连接、消息、错误等）
    const setupEventListeners = () => {
        // 连接成功
        window.addEventListener('ws:connect', () => {
            status.value = 'connected';
            error.value = null;
            ElNotification({
                title: '连接成功',
                message: 'WebSocket已成功连接',
                type: 'success',
                duration: 3000,
            });
        });
        // 接收消息
        window.addEventListener('ws:message', (event: CustomEvent) => {
            const message = event.detail;
            messages.value.push(message); // 存储到局部消息列表
            showNotification(message); // 显示通知
        });

        // 错误
        window.addEventListener('ws:error', (event: CustomEvent) => {
            error.value = event.detail;
            ElNotification({
                title: '连接错误',
                message: event.detail.message || 'WebSocket连接发生错误',
                type: 'error',
                duration: 5000,
            });
        });

        // 重连中
        window.addEventListener('ws:reconnect', () => {
            status.value = 'reconnecting';
            ElNotification({
                title: '重连中',
                message: '正在尝试重新连接WebSocket',
                type: 'warning',
                duration: 3000,
            });
        });

        // 连接关闭
        window.addEventListener('ws:close', () => {
            status.value = 'disconnected';
            ElNotification({
                title: '连接关闭',
                message: 'WebSocket连接已关闭',
                type: 'info',
                duration: 3000,
            });
        });
    };

    // 移除事件监听
    const removeEventListeners = () => {
        window.removeEventListener('ws:connect', () => {});
        window.removeEventListener('ws:message', () => {});
        window.removeEventListener('ws:error', () => {});
        window.removeEventListener('ws:reconnect', () => {});
        window.removeEventListener('ws:close', () => {});
    };

    // 组件挂载时初始化
    onMounted(() => {
        setupEventListeners();
        // 监听token变化（如登录后重新获取token）
        watch(
            () => token,
            (newToken) => {
                if (newToken) init();
            },
            { immediate: true } // 立即执行
        );
    });

    // 组件卸载时清理
    onBeforeUnmount(() => {
        removeEventListeners();
        // 仅在所有组件都卸载时关闭连接（可选，或在登出时关闭）
        // wsService.close();
    });

    return {
        status,
        error,
        messages,
        sendMessage,
        init,
    };
}
